<template>
  <div class="icons">
    <swiper :options="swiperOption">
      <swiper-slide v-for="(page,index) of pages" :key="index">
    <div class="icon" v-for="item of page" :key="item.id">
      <div class="icon-img">
        <img
          class="icon-img-content"
          :src="item.imgUrl"
        >
      </div>
      <p class="icon-desc">{{item.desc}}</p>
    </div>
    </swiper-slide>
    </swiper>
  </div>
</template>

<script>
export default {
  name: "HomeIcons",
  props:{
    list:Array
  },
  data () {
    return{
      swiperOption:{
        autoplay: false
      }
    }
  },
  computed:{
    pages (){
      const pages =[]
      this.list.forEach((item,index)=>{
        const page =Math.floor(index/8)
        if(!pages[page]){
          pages[page] = []
        }
        pages[page].push(item)
      })
      return pages
    }
  }
};
</script>

<style lang="stylus" scoped>
 @import '~styles/varibles.styl';
 @import '~styles/mixins.styl';
.icons {
  overflow: hidden;
  height: 0;
  padding-bottom: 50%;

}

.icon {
  position: relative;
  overflow: hidden;
  float: left;
  width: 25%;
  float: left;
  height: 0
  padding-bottom: 25%;
}

.icon-img {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0.44rem;
  width: 100%;
  box-sizing: border-box
  padding: .1rem
}
.icon-desc{
    position: absolute
    left: 0
    right: 0
    bottom: 0
    height: .44rem
    line-height: .44rem
    color: $darkTxtColor
    text-align: center
    overflow: hidden
    ellipsis()
}
.icon-img-content {
  display: block
  margin: 0 auto
  height: 100%;
}
</style>
